<template>
  <div>
    <div class="content">
       <div class="inner">
        <div class="inner-top">
            <div class="inner-top-left">缴费信息详情</div>
            <div class="inner-top-right"></div>
        </div>
        <div class="bottom">


          <el-form :inline="true" :model="formInline" class="demo-form-inline"   label-position="right" 
  label-width="87px">
  <el-form-item label="缴费产品:">
    <el-input v-model="formInline.product" readonly style="width: 495px;"></el-input>
  </el-form-item>
 
   <el-form-item label="缴费人员">
   <el-input v-model="formInline.user"  readonly style="width: 495px;"></el-input>
  </el-form-item>
 
   <el-form-item label="缴费金额:">
    <el-input v-model="formInline.sum" readonly style="width: 495px;"></el-input>
  </el-form-item>
 
     <el-form-item label="缴费优先级:">
 <el-input v-model="formInline.priority" readonly style="width: 495px;"></el-input>
  </el-form-item>
  
     <el-form-item label="支付时间:">
 <el-input v-model="formInline.time"  readonly style="width: 495px;"></el-input>
  </el-form-item>

     <el-form-item label="支付状态:">
 <el-input v-model="formInline.status"  readonly style="width: 495px;"></el-input>
  </el-form-item>
      <el-form-item label="支付类型:">
        <div class="picture">
         
          
              <el-radio v-model="radio" label="1" disabled ><img src="../../../../assets/images/zfb1.png" alt=""></el-radio>
            <el-radio v-model="radio" label="1" disabled > <img src="../../../../assets/images/wx1.png" alt=""></el-radio> 
          <el-radio v-model="radio" label="1" disabled > <img src="../../../../assets/images/ysf.png" alt=""></el-radio> 
         
        </div>
  </el-form-item><br>
     <el-form-item label="回复内容:">

  </el-form-item>
  
 
</el-form>
<div class="btn">
    <el-button type="primary">返回</el-button>
</div>


        </div>
       </div>
    </div>
  </div>
</template>

<script>
import axios from "axios"
 export default {
    data() {
      return {
        id:this.$route.query.detailId,
        formInline: {
          user: '',
          product:'',
          sum:'',
          priority:'',
          time:'',
          status:'',

        
        }
      }
    },
    created(){
        this.getlist()
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      getlist(){
         const token = sessionStorage.getItem('token');
          axios.get('http://community.byesame.com/cost/getCostDetail',{
            params:{
                id:this.id,
                token:token
            }
         }).then((res)=>{
            console.log(res.data[0].payname);
            this.formInline.product=res.data[0].payname
             this.formInline.sum=res.data[0].paymoney
                this.formInline.priority=res.data[0].paylevel
               this.formInline.status=res.data[0].paystatus==2?'未支付':'已支付'
                 this.formInline.time=res.data[0].paytime.slice(0, 20).split('T')
              

            
         })
      }
    }
  }
</script>

<style scoped>
body{
    background-color: #F0F0F0;
    padding: 20px;
}
.content{
    width: 100%;
    height:80vh;
    background-color: #fff;
    padding: 20px;
     box-sizing: border-box;
}
.inner{
    width: 100%;
    height: 100%;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
}
.inner-top{
    height: 51px;
    display: flex;
}
.inner-top-left{
    text-align: center;
    line-height: 51px;
    width: 10%;
    color: #409EFF;
    font-size: 14px;
    
}
.inner-top-right{
    width: 90%;
    border: 1px solid #DCDFE6;
    border-top: 0;
    background-color: #F5F7FA;
  height: 51px;
}
.bottom{
    padding: 35px 100px;
}
img{
    width: 100px;
    margin: 0 25px;
    vertical-align: middle;
}
.btn{
    position: fixed;
    top: 240px;
    right: 50px;
}
</style>